<template>
  <!--首页-->
  <div>
    <swiper :sliderList="sliderList"></swiper>
    <p class="msg" @click="lookMyMessage()"><img :src="src" alt="" width="40"><span v-if="noReadNum>0"></span></p>
    <div class="guangbo">
      <div class="marquee">
        <div class="marquee_title"><img :src="guangbo" alt="" width="21"></div>
        <div class="marquee_box">
          <ul class="marquee_list" :class="{marquee_top:animate}">
            <li v-for="(item,index) in messageInfoSysList" @click="goSysMessageInfoDetail(item.messageInfoId)">
              {{item.title}}
            </li>
          </ul>
        </div>
        <span @click.stop="lookSysMessage()"><img :src="arrow" alt="" height="15"></span>
      </div>
    </div>
    <ul class="cata">
      <li :style="firstbg">
        <span @click="goPlaneTicket" style="font-size: 18px">机票预订</span>
        <span @click="gotoguibin">贵宾厅</span>
        <span @click="guibintongdao" style="font-size: 18px">贵宾通道</span>
        <span @click="delaybaozhang">延误保障</span>
      </li>
      <li :style="twobg">
        <span @click="huiyuanzhekou" style="font-size: 18px">酒店预订</span>
        <span @click="lipinka">用车服务</span>
        <span @click="guibinka" style="font-size: 18px">停车服务</span>
        <span @click="onlinejizhi">网上值机</span>
      </li>
      <li :style="threebg">
        <span @click="yaokefuwu" style="font-size: 18px">要客服务</span>
        <span @click="yidengji">易登机服务</span>
        <span @click="kuaisudengji" style="font-size: 18px">快速登机</span>
        <span @click="shangcheng">微商城</span>
      </li>
    </ul>
    <ul class="link">
      <li @click="showTell(HoursHotline,1)"><span style="font-size: 15px;color: #FE642E">24H热线:{{HoursHotline}}</span>
      </li>
      <li @click="showTell(ServicePhone,2)"><span style="font-size: 15px;color: #FE642E">投诉专线:{{ServicePhone}}</span>
      </li>
    </ul>
    <more :recommendList="recommendList" :advList="advList" :moreParams="moreParams" :isOld="isOld"></more>
    <wv-tabbar :fixed="true">
      <wv-tabbar-item to="/index" is-on>
        <img class="weui-tabbar__icon" src="../../assets/home.png" slot="icon">
        主页
      </wv-tabbar-item>
      <wv-tabbar-item to="/saoma">
        <img class="weui-tabbar__icon" src="../../assets/saoma.png" slot="icon">
        扫码验证
      </wv-tabbar-item>
      <wv-tabbar-item to="/shangcheng">
        <img class="weui-tabbar__icon" src="../../assets/no.png" slot="icon">
        商城
      </wv-tabbar-item>
      <wv-tabbar-item to="/order">
        <img class="weui-tabbar__icon" src="../../assets/zhangdan.png" slot="icon">
        订单
      </wv-tabbar-item>
      <wv-tabbar-item to="/my">
        <img class="weui-tabbar__icon" src="../../assets/my.png" slot="icon"> 我的
      </wv-tabbar-item>
    </wv-tabbar>
    <div class="model" v-show="isVisible">
      <div class="bg"></div>
      <div class="modelContent">
        <img src="../../assets/close.png" alt="" width="15" @click="isVisible=false" class="close">
        <div>您的贵宾厅服务即将到期，可尊享限时续卡优惠</div>
        <p class="btn">
          <button @click="isVisible=false">取消</button>
          <button @click="goYouhui()">续卡优惠</button>
        </p>
      </div>
    </div>
    <div class="model" v-show="isshow">
      <div class="bg"></div>
      <div class="modelContent">
        <img src="../../assets/close.png" alt="" width="15" @click="isshow=false" class="close">
        <ul class="list">
          <li><img src="../../assets/tell.png" alt="" width="22">{{tellPhone}}</li>
          <li>{{callTip}}</li>
        </ul>
        <p class="btn">
          <button class="call" @click="goCallTellPhone(tellPhone)">拨打</button>
          <button class="cancel" @click="goCancel()">取消</button>
        </p>
      </div>
    </div>
    <mydialog :is-show="showAdvDialog" :top-distance="advDialogTopNum" @on-close="closeDialog">
      <div slot="main">
        <img :src="homeAdv.advImg| imgPathFilter" width="95%" height="95%" style="object-fit:cover" @click="goAdv()">
      </div>
    </mydialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import {initHomeData, checkin, getVipcard, getGuestcard, indexConfig, getPlaneTicket} from '../../../test/unit/http'
  import {getStore, setStore, removeStore} from '../../../test/unit/storage'
  import swiper from '../offertemplate/swipertemplate'
  import more from '../offertemplate/tuijianmore'
  import mydialog from '../offertemplate/mydialog'
  import {Toast} from 'we-vue'
  import kefususpend from '../suspend/kefususpend'

  export default {
    name: '',
    props: {},
    data() {
      return {
        animate: true,
        messageInfoSysList: [],
        isVisible: false,
        isshow: false,
        src: require('../../assets/msg.png'),
        guangbo: require('../../assets/guangbo.png'),
        arrow: require('../../assets/right.png'),
        tell: require('../../assets/tell.png'),
        tell1: require('../../assets/phone.png'),
        firstbg: {
          background: 'url(' + require('../../assets/first.png') + ') no-repeat',
          backgroundSize: '100% 100%',
        },
        twobg: {
          background: 'url(' + require('../../assets/two.png') + ') no-repeat',
          backgroundSize: '100% 100%',
        },
        threebg: {
          background: 'url(' + require('../../assets/three.png') + ') no-repeat',
          backgroundSize: '100% 100%',
        },
        sliderList: [],
        recommendList: [],
        advList: [],
        HoursHotline: "",
        ServicePhone: "",
        moreParams: {entrySource: 'home'},
        tellPhone: '',
        isOld: false,
        noReadNum: 0,
        callTip: "是否拨打",
        showAdvDialog: false,
        advDialogTopNum: 13,
        homeAdv: {}
      };
    },
    methods: {
      closeDialog() {
        this.showAdvDialog = false;
        this.initClickHomeAdv()
      },
      goAdv() {
        this.initClickHomeAdv();
        let jumpType = this.homeAdv.jumpType;
        if (jumpType == 1) {
          let url = this.homeAdv.content;
          window.location.href = this.$myUtils.convertHttpUrl(url);
        }
        if (jumpType == 2) {
          this.$router.push({path: 'advcontent', query: {advinfo: JSON.stringify(this.homeAdv)}})
        }
      },
      initClickHomeAdv() {
        removeStore("clickAdvInfo");
        let date = this.$myUtils.getNowDate();
        let data = {'date': date, isClick: true};
        setStore("clickAdvInfo", data);
      },
      showMarquee() {
        this.animate = true;
        setTimeout(() => {
          this.messageInfoSysList.push(this.messageInfoSysList[0]);
          this.messageInfoSysList.shift();
          this.animate = false;
        }, 500)
      },
      showTell(tellPhone, callType) {
        this.isshow = true;
        this.tellPhone = tellPhone;
        if (callType == 1) {
          this.callTip = "是否拨打24小时客服热线？";
        }
        if (callType == 2) {
          this.callTip = "是否拨打全国投诉监督专线？";
        }
      },
      goCancel() {
        this.isshow = false;
      },
      goCallTellPhone(tellPhone) {
        window.location.href = 'tel://' + tellPhone
      },
      goYouhui() {
        this.$router.push({path: '/zhuanxiang'})
      },
      lipinka() {
        let url = 'https://wx.17u.cn/internalcarrebornwechat/view/main.html#/specialCarIndex?index=specialCarIndex&refId=1510344221&isUseNewTab=true&isFromSmallIndex=true';
        window.location.href = url
      },
      lookMyMessage() {
        this.$router.push({path: 'msg', query: {messageType: 1}})
      },
      lookSysMessage() {
        this.$router.push({path: 'msg', query: {messageType: 2}})
      },
      goSysMessageInfoDetail(messageInfoId) {
        this.$router.push({path: 'msgdetail', query: {messageInfoId: messageInfoId}})
      },
      getIndexConfig(params) {
        indexConfig(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            let config = res.object;
            if (config.isOpen == 2) {
              Toast.text('功能完善中，敬请期待');
            } else {
              this.$router.push({path: '/' + params.path})
            }
          }
        })
      },
      goPlaneTicket() {
        getPlaneTicket({}).then(res => {
          console.log(res);
          if (res.code == 100) {
            let planeTicketAddress = res.object.planeTicketAddress;
            if (planeTicketAddress) {
              console.info('planeTicketAddress', planeTicketAddress);
              window.location.href = planeTicketAddress;
            }
          }
        })
      },
      goyaokeka() {
        let params = {configCode: 'GuestCard'};
        indexConfig(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            let config = res.object;
            if (config.isOpen == 2) {
              Toast.text('功能完善中，敬请期待');
            } else {
              getGuestcard({}).then(res => {
                console.log(res);
                if (res.code == 100) {
                  let goodsId = res.object.vipcard.vipcardId;
                  let result = this.$myUtils.isNull(goodsId);
                  if (result == false) {
                    this.$router.push({path: '/jinkadetail', query: {goodsId: goodsId}})
                  }
                }
              })
            }
          }
        })
      },
      gotoguibin() {
        this.$router.push({path: '/allguibinting'})
      },
      guibintongdao() {
        this.$router.push({path: '/guibintongdao'})
      },
      shangcheng() {
        this.$router.push({path: '/shangcheng'})
      },
      yidengji() {
        let params = {configCode: 'BoardingService', path: 'yidengji'};
        this.getIndexConfig(params);
      },
      yaokefuwu() {
        let params = {configCode: 'GuestService', path: 'yaokefuwu'};
        this.getIndexConfig(params);
      },
      onlinejizhi() {
        checkin({}).then(res => {
          console.log(res);
          let config = res.object;
          if (res.code == 100) {
            if (config.isOpen == 2) {
              Toast.text('功能完善中，敬请期待');
            } else {
              let url = res.object.content;
              window.location.href = url
            }
          }
        })
      },
      delaybaozhang() {
        let params = {configCode: 'DelayGuarantee', path: 'delaybaozhang'};
        this.getIndexConfig(params);
      },
      kuaisudengji() {
        let params = {configCode: 'SpeedyBoarding', path: 'kuaisudengji'};
        this.getIndexConfig(params);
      },
      huiyuanzhekou() {
        let url = 'https://m.elong.com/hotel/entry/snhk/';
        window.location.href = url
      },
      guibinka() {
        let url = 'https://3rd.xqpark.cn/currency/#/index?channelId=1258';
        window.location.href = url
      }
    },
    created() {
      initHomeData({}).then(res => {
        console.log(res);
        if (res.code == 100) {
          this.sliderList = res.object.sliderList;
          this.advList = res.object.advList;
          this.isOld = res.object.isOld;
          this.recommendList = res.object.recommendList;
          this.HoursHotline = res.object.HoursHotline.configVal;
          this.ServicePhone = res.object.ServicePhone.configVal;
          this.messageInfoSysList = res.object.messageInfoSysList;
          let isHaveHomeAdv = res.object.isHaveHomeAdv;
          if (isHaveHomeAdv) {
            let date = this.$myUtils.getNowDate();
            let data = JSON.parse(getStore("clickAdvInfo"));
            console.info("clickAdvInfoData", data);
            if (this.$myUtils.isNull(data)) {
              this.showAdvDialog = true;
            } else {
              let date1 = data.date;
              if (date != date1) {
                this.showAdvDialog = true;
              } else {
                this.showAdvDialog = false;
              }
            }
            this.homeAdv = res.object.homeAdv;
          }
          //this.isVisible = res.object.dueToExpire;
          this.noReadNum = res.object.noReadNum;
          setInterval(this.showMarquee, 2000)
        }
      })
    },
    components: {
      swiper,
      more,
      mydialog,
      kefususpend
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .marquee {
    align-items: center;
    color: #333;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;

    .marquee_box {
      display: block;
      position: relative;
      width: 100%;
      height: 30px;
      overflow: hidden;

      .marquee_list {
        display: block;
        position: absolute;
        top: 0;
        left: 0;

        li {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          padding-left: 10px;
        }
      }

      .marquee_top {
        transition: all 0.5s;
        margin-top: -30px
      }
    }
  }

  .msg {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 2;

    span {
      display: block;
      width: 5px;
      height: 5px;
      background-color: #ff0000;
      border-radius: 50%;
      position: absolute;
      top: 2px;
      right: 5px;
    }
  }

  .guangbo {
    height: 43px;
    line-height: 43px;
    background-color: #fff;
    border-radius: 5px;
    width: 90%;
    box-shadow: 4px 3px 10px rgba(32, 162, 223, 0.16);
    text-align: left;
    position: absolute;
    margin-top: -20px;
    left: 50%;
    margin-left: -48%;
    z-index: 2;
    padding: 0 10px;

    img {
      vertical-align: middle;
      margin-right: 5px;
    }

    span {
      float: right;
    }
  }

  .cata {
    margin-top: 20px;
    padding: 10px;

    li {
      height: 68px;
      line-height: 68px;
      display: flex;
      text-align: center;
      color: #fff;

      span {
        flex: 1;
      }
    }
  }

  .link {
    display: flex;

    li {
      flex: 1;
    }

    img {
      vertical-align: middle;
      margin-right: 5px;
    }

    :first-child {
      color: #56a7ed;
    }

    :last-child {
      color: #12cf8d;
    }
  }

  .tab-icon {
    display: inline-block;
    position: relative;
  }

  .bg {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 50px;
  }

  .model .modelContent {
    background-color: #fff;
    border-radius: 8px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -43%;
    margin-top: -111px;
    z-index: 2;
    padding: 30px 10px 20px;
    width: 80%;
    font-size: 16px;
    color: #111;

    .close {
      position: absolute;
      right: 10px;
      top: 10px
    }

    div {
      text-align: left;
      width: 75%;
      margin: 20px auto;
    }

    .list {
      font-size: 15px;
      margin-bottom: 20px;

      li:first-child {
        color: #56a7ed;
        margin-bottom: 5px;

        img {
          vertical-align: middle;
          margin-right: 5px;
        }
      }
    }

    .btn {
      button {
        height: 42px;
        line-height: 42px;
        color: #fff;
        outline: none;
        border: none;
        width: calc(50% - 20px);
        border-radius: 8px;
      }

      :first-child {
        background-color: #ccc;
        margin-right: 20px;
      }

      :last-child {
        background-color: #fc8c50;
      }

      .call {
        background-color: #2e94f0;
      }

      .cancel {
        background-color: #ccc;
      }
    }
  }
</style>
